<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用fetch发送网络请求</title>
  </head>

  <body>
    <form id="loginForm">
      <div>
        <label for="username">用户名：</label>
        <input id="username" name="username" />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" />
      </div>
      <div>
        <button type="submit">登录</button>
      </div>
    </form>
    <hr />
    <div id="selfInfo" style="border: 1px solid red">用户个人信息：</div>
    <script>
      // 异步函数，依次请求 用户登录 和 获取用户个人信息 接口
      // [代码]

      // 当 DOM 准备就绪后，再执行JS代码
      // [代码]

      async function login(data) {  
    // 等待异步操作fetch执行完毕后，再往下执行  
    let resp = await fetch("/api/rest/user/login", {  
        method: "POST",  
        body: data,  
        // 注意：原代码中有多余的逗号，这里已移除  
    });  
    if (!resp.ok) {  
        // 注意：原代码中使用了全角括号和引号，这里已替换为标准的半角符号  
        return Promise.reject("用户登录失败");  
    }  
    console.log("用户登录成功，接下来请求用户个人信息");  
      
    // 等待异步操作fetch执行完毕后，再往下执行  
    resp = await fetch("/api/rest/self");  
    if (!resp.ok) {  
        return Promise.reject("获取个人信息失败");  
    }  
    console.log("获取用户个人信息成功，将其显示在页面上");  
      
    // 以json格式返回数据  
    return resp.json();  
      }
    // 注意：原代码中的DOM相关部分与login函数逻辑不直接相关，通常不会放在函数体内  
    // 这里仅为了完整展示图片中的文本而保留，但建议将DOM操作部分放在函数外部处理  
  
    // 当DOM准备就绪后，再执行JS代码  
     document.addEventListener("DOMContentLoaded", () => {  
         const loginForm = document.getElementById("loginForm");  
         loginForm.addEventListener("submit", (event) => {  
            event.preventDefault();  
            let formData = new FormData(document.forms.loginForm);  
            login(formData).then(json => {  
                const selfInfo = document.getElementById("selfInfo");  
                selfInfo.innerHTML += JSON.stringify(json);  
             }).catch(err => console.log(err));  
        });  
    });  
    // 注意：上述DOM操作部分已被注释掉，因为它通常不包含在login函数内部  

    </script>
  </body>
</html>
